import Guide from '~/components/layout/guide'
import Snippet from '~/components/snippet'
import { InlineCode } from '~/components/text/code'
import Caption from '~/components/text/caption'
import Link from '~/components/text/link'
import { Image } from '~/components/media'
import DeploySection from '~/components/guides/deploy-section'

export const meta = {
  title: 'Getting Started with Next.js and ZEIT Now',
  description: 'Create a Next.js app and deploy it with ZEIT Now.',
  name: 'Next.js',
  type: 'app',
  published: '2019-02-10T12:00:00.860Z',
  authors: ['timothy', 'msweeneydev'],
  url: '/guides/deploying-nextjs-with-now',
  example: 'nextjs',
  demo: 'https://nextjs.now-examples.now.sh',
  image:
    'https://og-image.now.sh/**Deploy%20Serverless%20Next.js**%20with%20Now.png?theme=light&md=1&fontSize=83px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fzeit-black-triangle.svg&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&heights=250&heights=350',
  editUrl: 'pages/guides/deploying-nextjs-with-now.mdx',
  lastEdited: '2020-02-04T12:49:00.000Z'
}

Next.js is a framework, created by [ZEIT](https://zeit.co), for creating production-ready and lightning fast React apps with a lot of handy features built-in.

In this guide, you will learn how to create and deploy a [Next.js](https://nextjs.org/) app with [ZEIT Now](/).

## Step 1: Set Up Your Next.js Project

The first step in setting up your new Next.js project is to generate it with [`create-next-app`](https://github.com/zeit/next.js#quick-start):

<Snippet dark text="npm init next-app my-next-app && cd my-next-app" />
<Caption>
  Initializing a Next.js project with <InlineCode>create-next-app</InlineCode>{' '}
  and <Link href="https://www.npmjs.com/">npm</Link>, then moving into the project directory.
</Caption>

## Step 2: Deploying Your Next.js Project with ZEIT Now

<DeploySection meta={meta} />

export default ({ children }) => <Guide meta={meta}>{children}</Guide>

export const config = {
  amp: 'hybrid'
}
